<template>
	<view>
		<view class="cu-list menu sm-border">
			<!-- header -->
			<view v-if="header" class="cu-item">
				<view class="content">
					<text class="text-grey margin-lr-xl" v-text="headerTitle"></text>
				</view>
				<view class="action" :style="arrow ? 'padding-right: 30rpx' : ''">
					<text class="text-grey text-sm cu-tag round light" :class="headerBgColor" v-text="headerUnit"></text>
				</view>
			</view>
			
			<!-- 具体内容 -->
			<view class="cu-item" :class="arrow ? 'arrow': ''" v-for="(item, index) in dataList" @click="moreClick(item.userId, item.bookId)">
				<view class="content">
					<!-- 头像 -->
					<view v-if="avatar">
						<text class="cu-avatar icon round margin-lr-xl"
							  :style="'background-image: url(' + item[avatarUrl] + ')'">
						</text>
						<text class="text-grey" v-text="item[nickname]"></text>
					</view>
					
					<!-- 收入支出 -->
					<view v-if="record">
						<text class="cu-avatar icon round margin-lr-xl"
							  :style="'background-image: url(' + 
									base64_header + find(item.styleId).path + ')'" >
						</text>
						<text class="text-grey" 
							  v-text="find(item.styleId).name"></text>
							  <text class="text-grey margin-left-xl"
							  	  v-text="dateFormat(item.updateDate, '年月日')"></text>
					</view>
				</view>
				<view class="action">
					<text class="text-price text-sm cu-tag round light" :class="itemBgColor" v-text="numberFormat(item[amountTitle])"></text>
				</view>
			</view>
			<!-- <view class="text-center text-bold text-black text-df padding-xl">没有更多拉</view> -->
		</view>
		
	</view>
</template>

<script>
	import {base64_header, outcome_icons, income_icons} from '../../static/icons.js'
	import {dateFormat} from '../../common/dateUtils.js'
	export default {
		name: 'amount-list',
		data() {
			return {
				base64_header, outcome_icons, income_icons,
				dateFormat,
			}
		},
		props: {
			header: {
				default: true,
			},
			headerTitle: {
				default: '数据列表'
			},
			headerBgColor: {
				default: 'bg-red'
			},
			headerUnit: {
				default: '数据单位'
			},
			arrow: {
				default: true
			},
			dataList: {
				type: Array,
				required: true
			},
			avatar: {
				default: true,
			},
			avatarUrl: {
				default: 'avatarUrl'
			},
			record: {
				default: false
			},
			recordUrl: {
				
			},
			recordType: {
				default: true  // true支出，false收入
			},
			nickname: {
				default: 'nickname'
			},
			amountTitle: {
				type: String,
				required: true
			},
			itemBgColor: {
				type: String,
				default: 'bg-red'
			}
		},
		methods: {
			moreClick(userId, bookId) {
				this.$emit('moreClick', userId, bookId)
			},
			numberFormat(number = 0) {
				return Number(number).toFixed(2)
			},
			find(id) {
				// this.recordType
				// true 表示支出
				// false 表示收入
				let arr = this.recordType ? this.outcome_icons : this.income_icons
				return arr.find(item => item.id == id)
			}
		}
	}
</script>

<style>
	.icon {
		background-color: #fff !important;
	}
</style>
